import React, { Component } from 'react';
import { base, createPage, ajax } from 'nc-lightapp-front';
const { NCModal, NCDiv } = base;
import { STATUS, LIST_BUTTON, URL, POYUTIC } from '../constance';
import { initLang } from '../../../../scmpub/scmpub/pub/tool/multiLangUtil';
import initTemplate from './init/initTemplate';
import { buttonClickController, buttonController, btnClickController } from './viewController/index';

class Poyuti extends Component {
    constructor(props) {
		super(props);
		props.use.editTable(POYUTIC.TABLEID);
		this.state = {
			state: STATUS.browse,
			pk_order: null,
			pk_orders: null,
			queryDataFlag: true
		};
		//前端模型 编辑前参数
		this.model = {
			pk_org: null,
			pk_customer: null,
			pk_supplier: null,
			context: null,
			pk_order: null,
			pk_orders: null,
			currentIndex: 0
		};
        initLang(this, [ '4004poorder' ], 'pu', initTemplate.bind(this, this.props));
	}

    componentWillReceiveProps(nextProps) {
		if (this.props.showPoyutiModal && nextProps.showPoyutiModal && this.state.queryDataFlag) {
			let pk_orders = nextProps.pk_orders;
			if (pk_orders) {
				this.model.pk_orders = pk_orders;
				this.model.pk_org = nextProps.pk_org;
				this.model.pk_customer = nextProps.pk_customer;
				this.model.pk_supplier = nextProps.pk_supplier;
				this.queryData(pk_orders);
			}
		}
	}

    /**
	 * 查询数据
	 */
	queryData = (pk_orders) => {
		ajax({
			url: URL.ytmxquery,
			data: {
				pks: pk_orders,
				pageid: POYUTIC.PAGECODE
			},
			success: (res) => {
				let { success, data } = res;
				let rowsData = { rows: [] };
				this.setState({ queryDataFlag: false });
				if (data) {
					rowsData = data[POYUTIC.TABLEID];
				}
				// rowsData.rows.forEach((row) => {
				// 	row.values.crownobb1.display = row.values.crownobb1.value;
				// });
				this.props.editTable.setTableData(POYUTIC.TABLEID, rowsData);
				setTimeout(() => {
					buttonController.togglePageShow.call(this, this.props, STATUS.browse);
				}, 0);
			}
		});
		buttonController.initButtonVisible.call(this);
	};

    render() {
        const { createEditTable, mxdata } = this.props.editTable;

        return (
            <div>
                <NCModal
					id="yt"
					size="xlg"
					show={this.props.showPoyutiModal}
					onHide={() => {
						let status = this.props.editTable.getStatus(POYUTIC.TABLEID);
						this.props.onClose(status);
					}}
					fieldid="po_yuti"
				>
                    <NCModal.Header closeButton={true}>
						<NCModal.Title>采购预提</NCModal.Title>
					</NCModal.Header>
                    <NCModal.Body>
						<div className="nc-bill-list">
							<NCDiv areaCode={NCDiv.config.HEADER} className="nc-bill-header-area">
								<div className="header-button-area">
									{this.props.button.createButtonApp({
										area: POYUTIC.LIST_TITLE,
										onButtonClick: buttonClickController.bind(this),
										modalRelation: 'yt'
									})}
								</div>
							</NCDiv>
						</div>
						<div className="nc-bill-table-area">
							{/* 列表区域 */}
							{createEditTable(POYUTIC.TABLEID, {
								height: 465,
								showIndex: true, //显示序号
								showCheck: true,
								inModal: true,
								// onBeforeEvent: beforeEvent.bind(this),
								// onAfterEvent: afterEvent.bind(this),
								// onSelected: buttonController.selectedChange.bind(this),
								// onSelectedAll: buttonController.selectedChange.bind(this)
								adaptionHeight: true
							})}
						</div>
					</NCModal.Body>



                </NCModal>
            </div>
        );
    }
}

export default (Poyuti = createPage({})(Poyuti));